<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">流程配置</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')">新增流程</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="260">
          <template scope="s">
            <el-button type="primary"
                       icon="el-icon-search"
                       size="mini"
                       @click="dialogOpen('search', s.row)"
                       round></el-button>
            <el-button icon="el-icon-edit"
                       type="success"
                       size="mini"
                       @click="dialogOpen('PUT', s.row)"
                       round></el-button>
            <el-button size="mini"
                       @click="dialogOpen('AUDITOR', s.row)"
                       round>调整审核人</el-button>
            <el-button type="danger"
                       icon="el-icon-delete"
                       size="mini"
                       @click="tableLock(s.row)"
                       round></el-button>
          </template>
        </el-table-column>
        <el-form-item label="流程名称" prop="processName">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_processName"
                    placeholder="流程名称"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="departmentName">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_departmentName"
                    placeholder="所属部门"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog">
      <p slot="title">{{dialog.title}}流程
        <span v-if="dialog.title !== '新增'">流程名称：{{dialog.row.processName}}</span>
      </p>
      <div v-if="dialog.title === '查看'">
        <workflow :form="formDialog1" :search="true"></workflow>
      </div>
      <div v-else-if="dialog.title !== '调整审核人'">
        <el-tabs v-model="dialog.activeName" type="card">
          <el-tab-pane label="流程配置" name="1" disabled>
            <s-form :form="formDialog1" ref="formDialog1">
              <el-row>
                <el-col :xs="24" :lg="{span: 7, offset: 0}">
                  <el-form-item prop="processName" label="流程名称">
                    <el-input
                      type="text"
                      v-model="formDialog1.processName"
                      placeholder="流程名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 7, offset: 1}">
                  <el-form-item prop="departmentId" label="所属事业部">
                    <el-select filterable
                               ref="departmentId"
                               :disabled="dialog.title === '修改'"
                               v-model="formDialog1.departmentId"
                               placeholder="请选择">
                      <el-option
                        v-for="item in dialog.department"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="{span: 7, offset: 1}">
                  <el-form-item prop="processType" label="流程类型">
                    <el-select filterable
                               v-model="formDialog1.processType"
                               :disabled="dialog.title === '修改'"
                               placeholder="请选择">
                      <el-option
                        v-for="item in WORKFLOW.workflowType"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :lg="{span: 23, offset: 0}">
                  <el-form-item prop="processRemark" label="备注">
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="formDialog1.processRemark"
                      placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </s-form>
          </el-tab-pane>
          <el-tab-pane label="节点配置" name="2" disabled>
            <workflow :form="formDialog1"></workflow>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-else>
        <workflow :form="formDialog1" :auditor="true"></workflow>
      </div>
      <el-button slot="footer" v-if="dialog.title === '查看'" @click="dialogSearch">好</el-button>
      <el-button slot="footer" v-if="dialog.title !== '查看' && dialog.title !== '调整审核人' && dialog.activeName !== '1'" @click="dialogPre">上一页</el-button>
      <el-button slot="footer" type="primary" v-if="dialog.title !== '查看' && dialog.title !== '调整审核人' && dialog.activeName !== '2'" @click="dialogNext">下一页</el-button>
      <el-button slot="footer" v-if="dialog.title !== '查看' && dialog.title !== '调整审核人' && dialog.activeName === '2'" @click="dialogSave">保存</el-button>
      <el-button slot="footer" v-if="dialog.title === '调整审核人'" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise} from '~/plugins/Tools';
  import workflow from '~/components/reimbursement/workflow/workflow.vue';

  function __formDialog1 () {
    return {
      departmentId: {value: '', rule: ['vNull__change']},
      formId: {value: '', rule: ['vNull__change']},
      processId: {value: '', rule: []},
      processRemark: {value: '', rule: []},
      processName: {value: '', rule: ['vNull']},
      processType: {value: '', rule: ['vNull__change']},
    };
  }

  export default AutoVue({
    data: {
      table: {
        column: [
          {'label': '流程名称', 'prop': 'processName', 'minWidth': '0px', search: true},
          {'label': '所属部门', 'prop': 'departmentName', 'minWidth': '0px', search: true},
          {'label': '备注', 'prop': 'processRemark', 'minWidth': '0px'},
          {
            'label': '更新人姓名',
            'prop': 'updateUserName',
            'minWidth': '0px',
            'cRemarks': '不显示',
          }],
        key: 'id',
        url: '/workflowConfig/searchByPage',
        muti: false,
      },
      formDialog1: __formDialog1(),
      dialog: {
        title: '新增',
        department: [],
        formRef: 'formDialog1',
        width: '80%',
        activeName: '1',
        dialogCallBack: function () {
          this.DEL('WORKFLOW_data');
        },
        row: {
          workflowConfigVo: {},
        },
      },
    },
    transition: 'slide-fade-bottom',
    head: {
      'title': '流程配置',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 流程配置 流程配置'},
      ],
    },
    components: {
      workflow: workflow,
    },
    watch: {
      'formDialog1.processType': async function (id) {
        if (!id) return;
        let {contentList} = await this.post('/form/selectForms', {
          formType: id,
        });
        this.formDialog1.formId = contentList[0].formVo.id;
      },
    },
    store: ['WORKFLOW', 'DICTIONARY_workflow'],
    methods: {
      tableLock (row) {
        let tableRef = 'table';
        this.$confirm('您将删除该流程。', '是否确认？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          await this.get('/workflowConfig/enable/' + row.id);
          this.tableWatch(tableRef);
        });
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        let autoPromise = [
          async () => {
            if (!this.DICTIONARY_workflow) {
              await this.USE('DICTIONARY_workflow');
            }
          },
          async () => {
            let {contentList} = await this.post('/workflowConfig/workflowDepartments');
            this.dialog.department = contentList;
          },
        ];
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog1.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          autoPromise.push(async () => {
            let {workflowConfigVo, workflowNodePojos} = await this.get('/workflowConfig/' + more.id);
            this.dialog.row = workflowConfigVo;
            this.SET('WORKFLOW_data', workflowNodePojos);
            this.AwaitVue('formDialog1', () => {
              this.formDialog1 = {
                ...this.formDialog1,
                ...this.ObjectClone(__formDialog1(), workflowConfigVo),
              };
            });
          });
          break;
        case 'SEARCH':
          this.dialog.title = '查看';
          autoPromise.push(async () => {
            let {workflowConfigVo, workflowNodePojos} = await this.get('/workflowConfig/' + more.id);
            this.dialog.row = workflowConfigVo;
            this.SET('WORKFLOW_data', workflowNodePojos);
          });
          break;
        case 'AUDITOR':
          this.dialog.title = '调整审核人';
          autoPromise.push(async () => {
            let {workflowConfigVo, workflowNodePojos} = await this.get('/workflowConfig/' + more.id);
            this.dialog.row = workflowConfigVo;
            this.SET('WORKFLOW_data', workflowNodePojos);
          });
          break;
        }
        await AutoPromise(autoPromise);
        this.dialog.visible = true;
      },
      dialogPre () {
        this.dialog.activeName = parseInt(this.dialog.activeName) - 1 + '';
      },
      dialogNext () {
        this.VALIDATE('formDialog' + this.dialog.activeName, option => {
          this.dialog.activeName = parseInt(this.dialog.activeName) + 1 + '';
        });
      },
      async dialogSave () {
        let option = this.FORMOPTION('formDialog1');
        try {
          option.departmentName = this.$refs.departmentId.selectedLabel;
        } catch (err) {
          console.error(err);
        }
        let step = {
          workflowConfigVo: option,
          workflowNodePojos: this.$store.getters['WORKFLOW/option'],
        };
        if (this.dialog.title === '新增') {
          try {
            await this.post('/workflowConfig', step);
            this.dialog.dialogInit.call(this);
            this.tableWatch('table');
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        } else if (this.dialog.title !== '调整审核人') {
          step.workflowConfigVo.id = this.dialog.row.id;
          try {
            await this.put('/workflowConfig', step);
            this.dialog.dialogInit.call(this);
            this.tableWatch('table');
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        } else {
          try {
            await this.put('/workflowConfig/updateAuditors', this.$store.getters['WORKFLOW/auditors']);
            this.dialog.dialogInit.call(this);
            this.tableWatch('table');
            this.dialog.visible = false;
          } catch (err) {
            console.log(err);
          }
        }
      },
      dialogSearch () {
        this.dialog.dialogInit.call(this);
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log(this);
    },
  });
</script>

<style lang="scss">
  .node-card {
    width: 50%;
    margin: 10px auto 0 !important;
  }
</style>
